import Task from './components/Task'
import { DragDropContext } from 'react-beautiful-dnd'
import { useState } from 'react'
import './App.less'

const tasks = [
  {
    id: '1',
    title: 'Estudar programação',
    status: 1
  },
  {
    id: '2',
    title: 'Ler livros',
    status: 0
  },
  {
    id: '3',
    title: 'Fazer compras',
    status: 2
  },
  {
    id: '4',
    title: 'Lavar o carro',
    status: 1
  }
]

function App() {
  const [taskList, setTaskList] = useState(tasks)

  const changeTaskStatus = (result) => {
    const statusMap = {
      'To-Do-Task': 0,
      Pending: 1,
      Completed: 2
    }
    const taskTitle = result.destination?.droppableId
    if (!taskTitle) return
    const status = statusMap[taskTitle]
    setTaskList((prevState) => {
      const task = prevState.find(item => item.id === result.draggableId)
      task.status = status
      return [...prevState]
    })
  }
  
  return (
    <DragDropContext
      onDragEnd={ result => changeTaskStatus(result) }
    >
      <div className="main">
        <Task title="To-Do-Task" tasks={ taskList.filter(item => item.status === 0) } />
        <Task title="Pending" tasks={ taskList.filter(item => item.status === 1) } />
        <Task title="Completed" tasks={ taskList.filter(item => item.status === 2) } />
      </div>
    </DragDropContext>
  )
}

export default App
